<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BootStrap + AngularJS 分页显示</title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
		<script type="text/javascript" src="../js/angular.min.js"></script>
		
	</head>
<body>
	
	<div ng-app="paginationApp" ng-controller="paginationCtrl">
		<table class="table table-bordered">
			<tr>
				<th>序号</td>
					<th>商品编号</td>
						<th>名称</td>
							<th>价格</td>
			</tr>
			<tr ng-repeat = "product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1001</td>
				<td>冰箱</td>
				<td>2000</td>
			</tr>
		</table>
		<!--  基于Angular实现分页工具条功能-->
		<div>
			<ul class="pagination pull-right">
				<li>
					<a href="#" ng-click="prev()">上一页</a>
				</li>
				<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
					<a href ng-click="SelectPage(page)">{{page}}</a>
				</li>
				
				<li>
					<a href ng-click="next()">下一页</a>
				</li>
			</ul>

		</div>

	
	<script type="text/javascript">
	
		//定义模块
		var paginationApp = angular.module("paginatinApp",[]);
		//定义控制器
		paginationApp.controller("paginationCtrl",["$scope","$http",
		function($scope,$http){
			//1.分页组件  必须的变量
			$scope.currentPage = 1 ;//当前页(请求数据)
			$scope.pageSize = 4 ; //每页记录数(请求数据)			
			$scope.totalCount = 0 ; //总记录数(响应数据)
			$scope.totalPages = 0 ; //总页数 (根据总记录数,每页记录数计算)
			
			//2.指明 方法的 功能
			
			//需要在分页工具栏 显示的所有页码
			$scope.pageList = new Array();
			
			//加载上一页数据
			$scope.prev = function(){
				$scope.selectPage($scope.currentPage-1);
			}			
			//加载下一页数据
			$scope.prev = function(){
				$scope.selectPage($scope.currentPage+1);
			}
			//3.加载指定页数据   即发送请求  获取后台动态数据
			$scope.selectPage = function(page){
				//page  超出范围
				if($scope.totalPages !=0 && (page<1 || page>$scope.totalPages)){
					return ;
				}
				//3.将请求返回的数据绑定到前台模型中			
				$http({
					method:"GET",
					//url:"6_1.json",
					url:"6"+page+".json",
					params:{
						page : page,//当前页的页码
						pageSize: $scope.pageSize //每页记录数
					}
				}).success(function(data,status,headers,config){
					//显示表格数据					
					$scope.products =data.products;
					
					//根据总记录数   计算总页数
					$scope.totalCount = data.totalCount;
					$scope.totalPages = Mathceil($scope.totalCount/$scope.pageSize);
					//更新当前页码
					$scope.currentPage = page ;
					
					//显示分页工具条中页码
					var begin ;//显示第一个页码
					var end ; //显示最后一个页码
					
					//理论上 begin 是当前页-5
					begin =$scope.currentPage - 5 ;
					if(begin<1){//第一个页码不能小于1
						begin =1 ;
					}
					
					//显示10个页码,理论上 end = begin +9
					end = begin +9 ;
					if(end>$scope.totalPages){//最后一个页码不能大于总页码
						end = $scope.totalPages ;
					}
					
					//修正begin的值 ,理论上 begin = end - 9
					begin = end -9 ;
					if(begin <1){
						begin = 1 ;
					}
					
					//将页码加入 PageList集合
					for (var i=begin ;i<=end ; i++) {
						$scope.pageList.push(i);
					}
					
				}).error(function(data,status,headers,config){
					//当响应以错误状态返回时调用
					alert("出错,请联系管理员");
				});
				
				
				
				
			
			}
			
			
			
			//判断是否是当前页
			$scope.isActivePage = function(){
				return page ==$scope.currentPage;
			}
			
			//初始化,选中第一页
			$scope.selectPage(1);
		}]);
		
		
		//基于Angular实现分页工具条功能
		
	</script>
		</div>
</body>

</html>
